<!-- 增加页面开始 -->
[#macro tenantAddView]
<div class="model-form">
    <el-page-header @back="goBack" content="增加租户">
    </el-page-header>
    <div class="model-content">
        <el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="标识" size="mini" prop="key">
                        <el-input v-model="form.key" name="key">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="名称" size="mini" prop="name">
                        <el-input v-model="form.name" name="name">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="域名组" size="mini" prop="domainGroup">
                        <el-select style="width: 100%;" v-model="form.domainGroup" @change="changeDomain" filterable
                            clearable placeholder="请选择">
                            <el-option v-for="item in domainOptions" :key="item.id" :label="item.domain"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="域名" size="mini" prop="domain">
                        <el-input v-model="form.domain" name="domain" disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="logo" size="mini" prop="logo">
                        <el-input v-model="form.logo" name="logo">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话" size="mini" prop="phone">
                        <el-input v-model="form.phone" name="phone">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="地址" size="mini" prop="address">
                        <el-input v-model="form.address" name="address">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="theme" size="mini" prop="theme">
                        <el-input v-model="form.theme" name="theme">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="租户介绍" size="mini" prop="note">
                        <el-input v-model="form.note" name="note" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="类型" size="mini" prop="catalog">
                        <el-input v-model="form.catalog" name="catalog">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开始日期" size="mini" prop="beginDate">
                        <el-date-picker v-model="form.beginDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="到期日期" size="mini" prop="expireDate">
                        <el-date-picker v-model="form.expireDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="text-align: right;">
                <el-button @click="goBack">取消</el-button>
                <el-button type="primary" @click="add">确定</el-button>
            </el-row>
        </el-form>
    </div>
</div>
[/#macro]

[#macro tenantAddConfig]
<script type="text/x-template" id="my-tenant-add">
	[@tenantAddView /]
</script>
<script type="text/javascript">
    //添加组件开始
    var tenantAddConfig = {};
    tenantAddConfig.template = "#my-tenant-add";
    tenantAddConfig.methods = config.basicMethod();
    tenantAddConfig.data = function () {
        return {
            form: {
                key: '',
                name: '',
                domain: '',
                logo: '',
                phone: '',
                address: '',
                theme: '',
                note: '',
                catalog: '',
                beginDate: '',
                expireDate: ''
            },
            tempDomain: "",
            rules: {
                key: [
                    { required: true, message: '请输入标识', trigger: 'blur' }
                ],
            }
        }
    };
    tenantAddConfig.mounted = function () {
    }
    tenantAddConfig.computed = {};

    tenantAddConfig.computed.domainOptions = function () {
        return this.$store.state.domainOptions;
    };

    tenantAddConfig.watch = {};

    tenantAddConfig.watch["tempDomain"] = function (val, old) {
        this.form.domain = this.form.key + "." + val;
    };
    tenantAddConfig.watch["form.key"] = function (val, old) {
        this.form.domain = val + "." + this.tempDomain;
    };



    tenantAddConfig.methods.changeDomain = function (event) {
        var item = this.$store.state.domainOptions.find(item => { return item.id == event });
        if(item!=null){
            this.tempDomain=item.domain;
        }
    }
    tenantAddConfig.methods.add = function () {
        var self = this;
        this.$refs["ruleForm"].validate(function (valid) {
            if (valid) {
                self.addData();
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }

    tenantAddConfig.methods.addData = function () {
        var self = this, data = this.form;
        if (this.deforeAddData) {
            this.deforeAddData();
        }
        this.postData("${siteurl}tenantRest/tenant/create.htm", data, function (res) {
            if (res.code == 0) {
                self.$message({
                    message: '添加数据成功',
                    type: 'success'
                });
                self.$router.go(-1);
            } else {
                self.$message.error(res.msg);
            }
        });
    }
    var tenantAddView = Vue.component('add-view', tenantAddConfig);


</script>
[/#macro]

<!-- 增加页面结束 -->